<!DOCTYPE html>
<html lang="zh_CN">

<head>
  <meta charset="UTF-8">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <meta name=Keywords content="<%= htmlWebpackPlugin.options.keywords %>">
  <meta name=Description content="<%= htmlWebpackPlugin.options.description %>">
  <link rel="shortcut icon" href="//www.artup.com/img/logoMin.ico" type="images/x-icon" />
</head>

<body style="opacity:0;">
<div id="app">
  <unify-header></unify-header>
  <suspension class="suspend" ref="suspend" :show-height="showSuspensionHeight" @mouseleave="suspendPackUp">
    <div class="container">
      <div class="upper">
        <div class="wrapper">
          <label class="suspend-label">艺术画册</label>
          <label class="customization-item"
                 :class="{current:customizationItem==='border'}"
                 @mouseover="suspendPullDown('border')"
                 @click="suspendPullDown('border')">颜色：{{imgShowBool?frameColor[color].name:'未选择'}}</label>
          <label
            class="customization-item"
            :class="{current:customizationItem==='size'}"
            @mouseover="suspendPullDown('size')"
            @click="suspendPullDown('size')">尺寸：{{imgShowBool?frameSize[size].name:'未选择'}}</label>
          <label  class="suspend-label" >页数：{{framePage.length?framePage[page].name:'未选择'}}</label>
          <button class="customization-btn" @click="startCustom">开始定制</button>
        </div>
      </div>
      <div class="under">
        <div class="wrapper" style="padding-left:338px;">
          <div class="suspend-color-item"
               v-show="customizationItem==='border'"
               v-for="(item,index) in frameColor"
               :class="['background-'+item.code,{active:imgShowBool&&index===color}]"
               @click="color=index,imgShowBool=true,suspendPackUp()">
            <label>{{item.name}}</label>
          </div>
          <div class="suspend-size-item"
               v-show="customizationItem==='size'"
               v-for="(frameSize,index) in frameSize"
               :class="['background-'+frameColor[color].code,{active:imgShowBool&&index===size}]"
               @click='size=index,imgShowBool=true,suspendPackUp()'>{{frameSize.name}}
          </div>
        </div>
      </div>
    </div>
  </suspension>
  <div class="contentBox">
    <div class="selectBox">
      <div class="leftViewBox">
        <img v-show="!imgShowBool" src="http://image2.artup.com/static/pc/index/img/albumbig.png"/>
        <!--<img v-show="!imgShowBool" src="http://test.artup.com/builder/imgs/album/albumbig.png"/>-->
        <img v-show="imgShowBool" :src="picturePrefix+previewImageUrl"/>
      </div>
      <div class="rightViewBox">
        <div class="selectBox">
          <h2>艺术画册</h2>
          <p>全球专业的色彩管理方案，进口环保纸，每一个手工</p>
          <p>制作的相本选用无酸材料，可长久地保存，让记忆中</p>
          <p>的珍贵永不褪色。</p>
          <p class="sizeName">颜色</p>
          <div class="colorViewBox">
            <div class="color-box"
                 v-for="(item,index) in frameColor"
                 :class="{active:imgShowBool&&index===color}"
                 @click="color=index,imgShowBool=true">
              <div class="circle" :style="{'background':item.attr}">
              </div>
              <div class="k1_Foot1frame_click k1_pre_frame">{{item.name}}</div>
            </div>
          </div>
          <p class="sizeName">尺寸</p>
          <div class="sizeViewBox">
            <div class="size-box"
                 v-for="(frameSize,index) in frameSize"
                 :class="{'active':imgShowBool&&index===size}"
                 @click='size=index,imgShowBool=true'>{{frameSize.name}}
                <span v-if="index<3">56页</span>
                <span v-if="index>=3">72页</span>
            </div>
          </div>
          <!--设计稿没有页码-->
          <p class="sizeName" v-if="false">页码</p>
          <div class="sizeViewBox" v-if="false">
            <div class="size-box"
                 v-for="(item,index) in framePage"
                 :class="{active:index===page}"
                 v-show="page===index"
                 @click="page=index">{{item.code}}
            </div>
          </div>
          <!--设计稿没有页码 end-->
          <div class="showPrice" :style="{opacity:price?1:0}">{{price}}&nbsp;&nbsp;RMB</div>
          <a href="javascript:void(0);" @click="startCustom">
            <div class="startBook">开始定制</div>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="img-box-list" ref="showSuspensionFlag">
    <div class="banner" :class="'banner-'+i" v-for="i in 6" :key="i"></div>
  </div>
  <unify-footer></unify-footer>
</div>
</body>

</html>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-113376322-1"></script>
<script>
  window.dataLayer = window.dataLayer || []
  function gtag() {
    dataLayer.push(arguments)
  }
  gtag('js', new Date())

  gtag('config', 'UA-113376322-1')
</script>
